<template>
  <div v-if="userData">
    <div class="top">
      <img v-img="userData.avatar" alt="" />
      <p>{{ userData.nickname }}</p>
    </div>
    <van-cell title="会员中心" is-link />
    <van-cell title="我的订单" is-link />
    <van-cell title="收货地址" is-link />
    <van-cell title="我的足迹" is-link />
    <van-cell title="我的收藏" is-link />
    <van-cell title="意见反馈" is-link />
    <van-button round block type="danger" @click="submit">
      退出登入
    </van-button>
    <van-dialog
      v-model="show"
      title="温馨提示"
      message="确定退出吗?"
      show-cancel-button
      @confirm="confirm"
    >
    </van-dialog>
    <van-button round block type="danger" @click="isShow = true">
      {{ text }}
    </van-button>
    <child :isShow.sync="isShow" :text.sync="text" class="Child"></child>
  </div>
</template>
<script>
import { info } from '@/api/user'
import router from '@/router'
import store from '@/store'
import { mapMutations } from 'vuex'
import child from './child.vue'
export default {
  data () {
    return {
      userData: null,
      show: false,
      isShow: false,
      text: '点我试试'
    }
  },
  components: {
    child
  },
  mounted () {
    this.getuserinfo()
  },
  methods: {
    ...mapMutations('user', ['setToken']),
    async getuserinfo () {
      const token = store.state.user.token
      const res = await info(token)
      this.userData = res.data
    },
    submit () {
      this.show = true
    },
    confirm () {
      localStorage.clear()
      this.setToken(null)
      router.push('login')
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 66vw;
  background: var(--ThemeColors);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
  }
  p {
    margin: 10px auto;
    font-size: 20px;
    color: #fff;
  }
}
::v-deep(.van-cell--clickable) {
  text-align: left;
}
::v-deep(.van-button--normal) {
  margin: 20px auto;
  width: 90%;
}
::v-deep(.van-button--danger) {
  background-color: var(--ThemeColors);
  border: 1px solid var(--ThemeColors);
}

.Child {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 999;
}
</style>
